<template>
  <div class="s-table">
    <a-button class="create-btn" type="primary" @click.prevent="showModal">新建实体属性</a-button>
    <a-table
      :defaultExpandAllRows="true"
      :dataSource="list"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <div>
            <a @click="showModal(record)">编辑</a>
          </div>
        </template>
      </template>
    </a-table>
    <UpdateEntityAttribute ref="updateEntityAttributeRef" @reload="getContentList" />
  </div>
</template>

<script setup lang="ts">
import UpdateEntityAttribute from './UpdateEntityAttribute.vue'
import { apiGetPropertyList } from '@/services/tableDemo'
import { TablePaginationConfig, TableProps } from 'ant-design-vue'

const updateEntityAttributeRef = ref<InstanceType<typeof UpdateEntityAttribute>>()

const columns = [
  {
    title: '属性显示名',
    width: 300,
    dataIndex: 'name'
  },
  {
    title: '属性名',
    width: 300,
    dataIndex: 'field'
  },
  {
    title: '数据类型',
    dataIndex: 'type'
  },
  {
    title: '字典',
    dataIndex: 'dictType',
    customRender: (info: { text: string }) => {
      return info.text ? '有' : '无'
    }
  },
  {
    title: '更新时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'action'
  }
]
const loading = ref(false)
const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 10
})

const page = computed(() => ({
  pageNumber: pagination.value.current,
  pageSize: pagination.value.pageSize
}))
const searchParams = ref<TABLE_PARAMS.PropertyRequestData>()

const list = ref<TABLE_PARAMS.EntityProperty[]>([])

// 分页查询
const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
  pagination.value.current = tabPage.current || 1
  pagination.value.pageSize = tabPage.pageSize || 10
  getContentList()
}

// 获取页面list
const getContentList = async () => {
  loading.value = true
  const res = await apiGetPropertyList({
    ...page.value,
    ...searchParams.value
  })
  const { datas, count } = res.responseData
  list.value = datas || []
  pagination.value.total = count || 0
  loading.value = false
}

// 查询
const search = (params: TABLE_PARAMS.PropertyRequestData) => {
  searchParams.value = params
  pagination.value.current = 1
  getContentList()
}

// 新建实体属性
const showModal = (info?: TABLE_PARAMS.EntityProperty) =>
  updateEntityAttributeRef.value?.showModal(info)

defineExpose({
  search
})
</script>
<style lang="less" scoped></style>
